<template>
	<view class="add-product">
		<view class="add-product-1">
			<view class="add-image" @click="choseMainImg" v-if="!designerInfo.image_middle">
				<view>
					<image src="https://master.shengejiaju.cn/web/static/icons/ico_add_pic02@2x.png"></image>
					<view>上传封面图</view>
				</view>
			</view>
			<view class="show-img" v-else>
				<image :src="designerInfo.image_middle" @click="previewImg" mode="aspectFill"></image>
				<view @click="choseMainImg">更换封面图</view>
			</view>
		</view>
		
		<view class="add-product-2">
			<view class="add-product-2-cell">
				<text class="title">姓名</text>
				<input v-model="designerInfo.name" />
			</view>
			<view class="add-product-2-cell">
				<text class="title">等级</text>
				<input v-model="designerInfo.code" placeholder="如：高级设计师" placeholder-style="color:#FE9B26" />
			</view>
			<view class="add-product-2-cell">
				<text class="title">擅长风格</text>
				<input v-model="designerInfo.style_name" placeholder="多个风格用英文的逗号','隔开" placeholder-style="color:#FE9B26" />
			</view>
			<view class="add-product-2-cell">
				<text class="title">简介</text>
				<textarea class="des" v-model="designerInfo.brief" auto-height></textarea>
			</view>
			<view class="add-product-2-cell">
				<text class="title" style="width: 3em;;">排序</text>
				<input type="number" v-model="designerInfo.sort" placeholder="数字越大，排序越靠前(默认为0)" placeholder-style="color:#FE9B26"/>
			</view>
		</view>
		
		<view class="add-product-5">
			<text class="title">设计师图片</text>
			<view class="piclist-box">
				<view class="showimg" v-for="(data,index) in viceImages" :key="index" v-if="viceImages.length">
					<image class="close" src="https://master.shengejiaju.cn/web/static/icons/ico_close@2x_white.png" @click="delVice(data.id,index)"></image>
					<image class="pic" :src="data.url" mode="aspectFit" @click="previewViceImg(index)"></image>
				</view>
				<view @click="addVice"><image src="https://master.shengejiaju.cn/web/static/icons/ico_ad_pic02.png"></image></view>
			</view>
		</view>
		
		<view class="add-product-5" style="margin-bottom: 20rpx;">
			<text class="title">TA的案例</text>
			<view class="piclist-box">
				<view class="showimg" v-for="(data,index) in designerCaseList" :key="index">
					<image class="close" src="https://master.shengejiaju.cn/web/static/icons/ico_close@2x_white.png" @click="delCase(index,data.id)"></image>
					<image class="pic" :src="data.image"></image>
					<view class="piclist-box-tit">{{data.title}}</view>
				</view>
				<view @click="selectCaseItem"><image src="https://master.shengejiaju.cn/web/static/icons/ico_ad_pic02.png"></image></view>
			</view>
		</view>
		
		<view class="add-product-submit">
			<button @click="submit">保存</button>
		</view>
		
		<uni-popup ref="selectPro" type="bottom" class="selectProItem">
			<view class="search-bar">
				<uni-search-bar @confirm="search" @input="input" :radius="100" cancelButton="always" @cancel="cancel"></uni-search-bar>
			</view>
			<scroll-view scroll-y class="selectView">
				<checkbox-group v-model="choseList" @change="change" v-if="caseList.length">
					<view class="proList-item" v-for="(data,index) in caseList" :key="index">
						<label>
							<checkbox :value="(data.case_id).toString()" :checked="data.checked" color="#FFF" />
							<image :src="data.image_middle" mode="aspectFit"></image>
							<view class="proList-item-info">
								<view class="proList-item-info-tit">{{data.case_name}}</view>
								<view class="proList-item-info-des">{{data.brief}}</view>
							</view>
						</label>
					</view>
				</checkbox-group>
				<nothing :text="'没有案例'" :btn="false" v-else></nothing>
			</scroll-view>
			<view class="confirm-bar"><text @click="sure">确认选择</text></view>
		</uni-popup>
		
	</view>
</template>

<script>
	const md5 = require('../../static/utils/md5')
	import host from '@/api/config.js'
	export default {
		data() {
			return {
				designerCaseList: [],
				choseList: [],
				caseList: [],
				viceImages: [],
				designerInfo: {
					name: '',
					style_name: '',
					brief: '',
					code: '',
					case_id: '',
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					image: '',
					image_middle: '',
					sort: '',
					viceImages: ''
				},
				searchValue: '',
				uploadParameter: {}
			};
		},
		onLoad(options) {
			if(options.id){
				uni.setNavigationBarTitle({
					title: '编辑设计师'
				})
				this.getDesignerInfo(options.id)
			}
			this.init()
		},
		methods: {
			getDesignerInfo(id){
				this.$api.StylistList({store_stylist_id: id}).then(res => {
					let designerInfo = res.datas[0]
					this.designerInfo = {
						store_stylist_id: designerInfo.store_stylist_id,
						name: designerInfo.name,
						style_name: designerInfo.style_name,
						brief: designerInfo.brief,
						code: designerInfo.code,
						case_id: designerInfo.case_id,
						store_id: designerInfo.store_id,
						image: designerInfo.image,
						image_middle: designerInfo.image_middle,
						sort: designerInfo.sort
					}
					if(designerInfo.image_list){
						designerInfo.image_list.forEach((item,index) => {
							this.viceImages.push({
								id: item.stylist_image_id,
								url: item.image
							})
						})
					}
					if(designerInfo.case_list){
						designerInfo.case_list.forEach((item,index) => {
							this.designerCaseList.push({
								id: item.case_id,
								image: item.image_middle,
								title: item.case_name
							})
						})
					}
				})
			},
			// 参数排序
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
						newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			init(){
				let data = {}
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					data.port = 'wechat'
				}else{
					data.port = 'h5'
				}
				// #endif
				
				// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
					case 'android':
						data.port = 'android'
					  break;
					case 'ios':
						data.port = 'ios'
					  break;
				}
				// #endif
				
				data.key = JSON.parse(uni.getStorageSync('userInfo')).token
				
				data.timestamp = Math.round(new Date() * 1000)
				// 获取签名开始
				let obj = 'jjds2020+'
				let newObj = this.objKeySort(data)
				for (let i in newObj){
					obj += i + '=' + newObj[i] +'&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5.hexMD5(obj)
				obj = obj.toUpperCase()
				// 获取签名结束
				data.sign = obj
				this.uploadParameter = data
			},
			choseMainImg(){
				let _this = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						let imgs = []
						res.tempFiles.forEach(item => {
							imgs.push({
								uri: item.path
							})
						})
						uni.uploadFile({
							url: `${host}/api/Upimg/UpMajorImg`,
							filePath: imgs[0].uri,
							name: 'file',
							formData: {
								port: _this.uploadParameter.port,
								key: _this.uploadParameter.key,
								timestamp: _this.uploadParameter.timestamp,
								sign: _this.uploadParameter.sign
							},
							success: (uploadFileRes) => {
								_this.designerInfo.image = JSON.parse(uploadFileRes.data).datas[0].major_img_big
								_this.designerInfo.image_middle = JSON.parse(uploadFileRes.data).datas[0].major_img_middle
							}
						});
					}
				})
			},
			// 预览主图
			previewImg(){
				let arr = []
				arr.push(this.designerInfo.image)
				uni.previewImage({
					urls: arr
				})
			},
			// 上传设计师附图
			addVice(){
				let _this = this
				uni.chooseImage({
					count: 9,
					sourceType: ['album','camera'],
					success(res) {
						let url = ''
						let formData = {}
						if(_this.designerInfo.store_stylist_id){
							url = `${host}/api/Stylist/AddStylistImg`
							formData = {
								type: 4,
								port: _this.uploadParameter.port,
								key: _this.uploadParameter.key,
								timestamp: _this.uploadParameter.timestamp,
								sign: _this.uploadParameter.sign,
								store_stylist_id: _this.designerInfo.store_stylist_id
							}
						}else{
							url = `${host}/api/Upimg/UpViceImg`
							formData = {
								port: _this.uploadParameter.port,
								key: _this.uploadParameter.key,
								timestamp: _this.uploadParameter.timestamp,
								sign: _this.uploadParameter.sign,
							}
						}
						res.tempFilePaths.forEach((item,index) => {
							uni.uploadFile({
								url: url,
								filePath: item,
								name: 'file',
								formData: formData,
								success: (uploadFileRes) => {
									if(_this.designerInfo.store_stylist_id){
										_this.viceImages.push({
											id: JSON.parse(uploadFileRes.data).datas[0].image_id,
											url: JSON.parse(uploadFileRes.data).datas[0].imgUrl
										})
									}else{
										_this.viceImages.push({
											id: index,
											url: JSON.parse(uploadFileRes.data).datas[0].vice_img_big
										})
									}
								}
							});
						})
					}
				})
			},
			// 移除设计师附图
			delVice(id,index){
				this.viceImages.splice(index,1)
				if(this.designerInfo.store_stylist_id){
					this.$api.DelStylistImg({stylist_image_id: id}).then(res => {
						uni.showToast({
							icon: 'none',
							title: '删除成功',
							duration: 1500
						})
					})
				}
			},
			// 获取案例列表
			getCaseList(page,keyword){
				let caseData = {
					order_by: 'add_time',
					asc: 1,
					page: page?page:0,
					limit: 10,
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					keyword: keyword?keyword:''
				}
				this.$api.CaseList(caseData).then(res => {
					this.caseList = res.datas.list
				})
			},
			// 选择设计师关联案例
			selectCaseItem(){
				this.$refs.selectPro.open()
				this.getCaseList()
			},
			// 搜索商品
			search(e){
				this.getCaseList(0,e.value)
			},
			// 输入事件
			input(e){
				this.searchValue = e.value
			},
			// 取消搜索
			cancel(){
				this.$refs.selectPro.close()
			},
			// 选择案例
			change(e){
				let _this = this
				var items = this.caseList,
						values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.case_id.toString())){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			// 确认选择
			sure(){
				let checked = 0
				this.caseList.forEach((item,index) => {
					if(item.checked){
						checked++
						this.designerCaseList.push({
							id: item.case_id,
							image: item.image_middle,
							title: item.case_name
						})
					}
				})
				if(checked < 1){
					uni.showToast({
						icon: 'none',
						title: '请选择至少一个商品'
					})
				}else{
					this.$refs.selectPro.close()
				}
			},
			// 移除案例
			delCase(index,id){
				this.designerCaseList.splice(index,1)
			},
			submit(){
				let viceArr = []
				if(this.viceImages.length){
					this.viceImages.forEach(item => {
						viceArr.push(item.url)
					})
					this.designerInfo.viceImages = viceArr.join(',')
				}
				let caseArr = []
				if(this.designerCaseList.length){
					this.designerCaseList.forEach((item,index) => {
						caseArr.push(item.id)
					})
				}
				this.designerInfo.case_id = caseArr.join(',')
				if(this.designerInfo.store_stylist_id){
					this.$api.UpStylist(this.designerInfo).then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					})
				}else{
					this.$api.AddStylist(this.designerInfo).then(res => {
						uni.showToast({
							icon: 'none',
							title: '添加成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import  '../../static/scss/add-product.scss';
	.search-bar{
		border-top: solid 1px #EEE;
		border-bottom: solid 1px #EEE;
	}
	.confirm-bar{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: solid 1px #EEE;
		text-align: center;
		padding: 20rpx 0;
		text{
			display: inline-block;
			vertical-align: top;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 100rpx;
			font-size: 24rpx;
			background-color: #FE9B26;
			color: #FFF;
			padding: 0 30rpx;
		}
	}
	.selectView{
		position: absolute;
		top: 110rpx;
		bottom: 90rpx;
		.proList-item{
			padding: 20rpx;
			border-bottom: solid 1px #EEE;
			label{
				display: flex;
				align-items: center;
			}
			&:last-child{
				border-bottom: none;
			}
			image{
				width: 300rpx;
				height: 200rpx;
			}
			.proList-item-info{
				flex: 1;
				min-width: 0;
				margin-left: 20rpx;
				.proList-item-info-tit{
					font-size: 28rpx;
				}
				.proList-item-info-des{
					color: #666;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>